<template>
     <div class="article-container">
        <!-- 文章详情
        {{ articleId }} -->
        <!--导航栏-->
        <van-nav-bar class="page-nav-bar" left-arrow title="博学谷头条"></van-nav-bar>

        <div class="main-wrap" v-if="loading">
            <!--加载中-->
            <div class="loading-wrap">
                <van-loading color="#3296fa"  vertical>加载中</van-loading>
            </div>
        </div>

        <!--加载完成--文章详情-->
        <div class="article-detail" v-else-if="article.title">
            <!--文章标题-->
            <h1 class="article-title">这是文章标题</h1>
            <!--用户信息-->
            <van-cell class="user-info" center :border="false">
                <van-image class="avatar" round fit="cover" :src="`${url}`+article.photo" />
                <template #title class="user-name">{{ article.author }}</template>
                <template #label class="publish-date">{{ dayjs().to(dayjs(article.pubdate)) }}</template>
                <van-button class="follow-btn" type="info" color="#3296fa" round size="small" icon="plus">关注</van-button>
            </van-cell>

            
            <!--文章内容-->
            <div class="article-content" v-html="article.content"> </div>
            <van-divider>正文结束</van-divider>

        </div>
        
        <div class="error-wrap" v-else-if="errStatus===404">
            <van-icon name="failure" />
            <p class="text" >该资源不存在或已删除!</p>
        </div>

        <!--加载失败:其它未知错误(例如网络原因或服务器异常)-->
        <div class="error-wrap" v-else>
            <van-icon name="failure"/>
            <p class="text">内容加载失败!</p>
            <van-button class="retry-btn" @click="loadArticle(articleId)">点击重试</van-button>
        </div>

     </div>
</template>

<script>
import { ref, onMounted, reactive,toRefs } from 'vue';
import {  getArticlesById } from "../../api/article"
import dayjs from "../../utils/day";
import { showImagePreview } from 'vant';
import '@vant/touch-emulator';


function useLoadArticle(articleId,state) {
    const loadArticle= async (id)=>{

        state.loading=true;
        try {
            const { data } = await getArticlesById(articleId?articleId:id)
            console.log(data.data)
             state.article=data.data ;
             

        } catch (error) {
            if(error.response && error.response.status===404)
            {
                state.errStatus=404;
            }
            console.error(error)
        }
        state.loading=false;
    }
    

    onMounted(() => {
        loadArticle();

        showImagePreview({
            images: [
                'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
                'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
            ],
            closeable: true,
            startPosition: 1,
            onClose() {
                    showToast('关闭');
                },
            });
         
    });

    return { loadArticle }
}
export default {
//组件使用项目  
  props: { 
    articleId:{ 
        type:String,
        required:true 
    }
 },

//使用组件 
 //components:{ArticleItem },
     setup(props) {
        const state=reactive({
            article:{
                title:'',
                author:'',
                pubdate:'',
                content:'',
                photo:''
            },
            loading:true,
            errStatus:0
        });
         
        
        const url=import.meta.env.VITE_APP_URL;
        

        return {
            url,
            dayjs,
            ...useLoadArticle(props.articleId,state ),
          ...toRefs(state)
        };
     },
 };
</script>
<style>
     .article-container .main-wrap{
        position: fixed;left:0;right:0;top: 50px;
        bottom: 40px; overflow-y: scroll;
        background-color: #fff;
     }
     .article-container .article-detail  .avatar{
        width: 70px;height: 70px;margin-right: 17px;
     }
     .article-container .article-detail .van-cell__label{
        margin-top: 0;
     }
  
    .article-container .article-detail .user-name{
        font-size: 14px;color: #3a3a3a;
    }
    .publish-date{
        font-size: 14px;color: #b7b7b7;
    }
    .follow-btn{
        width: 60px;height: 30px;
    }
    .article-content{
        padding: 20px 20px;
    }

    .article-content p{
        text-align: justify;
    }
    .loading-wrap{
        padding: 200px 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .van-icon
    {
        font-size: 10px;color: #b4b4b4;
    }
    .text{
        font-size: 20px;color: #666;margin: 33px 0 46px;
    }
    .retry-btn{
        width: 280px;height: 70px;line-height: 70px;border: 1px solid #c3c3c3;font-size: 20px;color: #666;
    }
    .article-bottom
    {
        display: flex; position: fixed;left: 0;right: 0;bottom: 0;justify-content: space-around;
        align-items: center;box-sizing: border-box;height: 88px;border-top: 1px solid #d8d8d8;
        background-color: #fff;
    }

    .comment-btn
    {
        width: 182px;height: 46px;border: 2px solid #eee; font-size: 16px; line-height: 46px;color: #a7a7a7;
    }
    .van-info{font-size:20px;}
</style>